<template>
  <div class="LoginPage">
    <div class="box box_left">
      <h1>宠物医院管理系统</h1>
    </div>
    <div class="box box_right">
      <div class="lables">
        <el-input v-model="email" placeholder="账号（邮箱）"></el-input>
      </div>
      <div class="lables">
        <el-input
          v-model="password"
          type="password"
          placeholder="密码"
        ></el-input>
      </div>

      <!-- <div class="lables">
        <el-select v-model="usertype" placeholder="用户类型">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div> -->

      <el-row>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="reset" @click="reset">重置</el-button>
      </el-row>

      <!-- <router-link to="/registerPage" style="color: white"
        >没有账号？前往注册</router-link
      > -->
    </div>
  </div>
</template>
   
   <script>
import { postAdminLogin} from '@/utils/request';
export default {
  name: "LoginPage",
  data() {
    return {
      email: "",
      password: "",
      usertype: "",
      options:[
        {
            value:2,
            label:"普通用户"
        },{
            value:1,
            label:"管理员"
        }
      ]
    };
  },
  computed: {},
  components: {},
  created() {},
  mounted() {},
  methods: {
    login() {
      //管理员登录
        let admin = {
          "email":this.email,
          "password":this.password
        }
        console.log("请求成功")
        postAdminLogin(admin).then((res)=>{
          if(res.data.status==true){
            console.log("请求成功")
            //持久化用户的信息
            this.$store.commit('SET_USER',res.data.data)
            this.$router.push("/LayoutPage");
          }else{
            this.$message.error("您的信息有误");
          }
        })
    },
    //重置输入框
    reset() {
      this.email = "";
      this.password = "";
    },
  },
};
</script>
   <style scoped>
.LoginPage {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(54, 50, 50);
  /* background: rgb(0, 42, 55); */
}
.box {
  width: 400px;
  height: 200px;
  /* border: 1px solid ; */
  display: flex;
  justify-content: center;
  align-items: center;
}
.box_left {
  flex-direction: column;
  justify-content: space-around;
  border-right: 1px solid white;
}
h1,
h2 {
  color: white;
}
.box_right {
  flex-direction: column;
  justify-content: space-around;
}
.lables{
    width: 220px;
}
</style>
   